<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spark Job Manager</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h1 class="mb-4">Spark Job Manager</h1>

    <!-- Add Job Form -->
    <div class="card mb-4">
        <div class="card-header">
            <h5>Add New Spark Job</h5>
        </div>
        <div class="card-body">
            <form method="post" th:action="@{/jobs}">
                <div class="mb-3">
                    <label class="form-label" for="jobName">Job Name</label>
                    <input class="form-control" id="jobName" name="jobName" required type="text">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="jarPath">JAR Path (on remote server)</label>
                    <input class="form-control" id="jarPath" name="jarPath" required type="text">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="mainClass">Main Class</label>
                    <input class="form-control" id="mainClass" name="mainClass" required type="text">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="arguments">Arguments</label>
                    <input class="form-control" id="arguments" name="arguments" type="text">
                </div>
                <div class="mb-3">
                    <label class="form-label" for="scheduleExpression">Schedule (Cron Expression)</label>
                    <input class="form-control" id="scheduleExpression" name="scheduleExpression" placeholder="0 0 * * * ? (every hour)"
                           type="text">
                </div>
                <button class="btn btn-primary" type="submit">Add Job</button>
            </form>
        </div>
    </div>

    <!-- Jobs List -->
    <div class="card">
        <div class="card-header">
            <h5>Spark Jobs</h5>
        </div>
        <div class="card-body">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Status</th>
                    <th>Schedule</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="job : ${jobs}">
                    <td th:text="${job.id}"></td>
                    <td>
                        <a th:href="@{/jobs/{id}(id=${job.id})}" th:text="${job.jobName}"></a>
                    </td>
                    <td>
                        <span th:switch="${job.status}"
                              th:text="${job.status}">
                            <span class="badge bg-primary" th:case="'RUNNING'"></span>
                            <span class="badge bg-success" th:case="'COMPLETED'"></span>
                            <span class="badge bg-danger" th:case="'FAILED'"></span>
                            <span class="badge bg-secondary" th:case="'SCHEDULED'"></span>
                            <span class="badge bg-warning" th:case="*"></span>
                        </span>

                    </td>
                    <td th:text="${job.scheduleExpression} ?: 'Manual'"></td>
                    <td>
                        <a class="btn btn-sm btn-success" th:href="@{/jobs/{id}/trigger(id=${job.id})}">执行</a>
                        <a class="btn btn-sm btn-warning" th:href="@{/jobs/{id}/cancel(id=${job.id})}">取消</a>
                        <a class="btn btn-sm btn-danger" th:href="@{/jobs/{id}/delete(id=${job.id})}">删除</a>
                        <a class="btn btn-sm btn-danger" th:href="@{/jobs/{id}(id=${job.id})}">详情</a>
                        <a class="btn btn-sm btn-danger"
                           th:href="@{/jobs/checkJobStatus?jobId={id}(id=${job.id})}">刷新状态</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Status Filters -->
    <div class="mt-3">
        <h5>Filter by Status:</h5>
        <div class="btn-group" role="group">
            <a class="btn btn-secondary" th:href="@{/jobs/status/SCHEDULED}">Scheduled</a>
            <a class="btn btn-primary" th:href="@{/jobs/status/RUNNING}">Running</a>
            <a class="btn btn-success" th:href="@{/jobs/status/COMPLETED}">Completed</a>
            <a class="btn btn-danger" th:href="@{/jobs/status/FAILED}">Failed</a>
            <a class="btn btn-warning" th:href="@{/jobs/status/CANCELLED}">Cancelled</a>
            <a class="btn btn-info" th:href="@{/jobs}">All</a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>